<script lang='ts' setup name='Login'>

import { reactive } from 'vue'
import http from '@/utils/request'
import { useRouter } from "vue-router";

import { userToken } from "@/store/useToken";

const tokenStore =  userToken()

const router = useRouter();//路由
const form = reactive({
      username: '',
      password: ''
})

async function login() {
      const url = "/login"
      const token = await http.post(url,form)
      if(token){
            tokenStore.setToken(token)
            router.replace({path:'/'})
      }
      
}

</script>

<template>


      <div class="container">

            <div class="form">
                  <h3 align="center">东软云医院系统</h3>
                  <el-form :model="form" label-width="auto" style="max-width: 600px">
                        <el-form-item label="用户名">
                              <el-input v-model="form.username" />
                        </el-form-item>
                        <el-form-item label="密码">
                              <el-input type="password" v-model="form.password" />
                        </el-form-item>

                        <el-form-item>
                              <el-button type="primary" @click="login" style="width:100%;margin-top:10px">保存</el-button>
                        </el-form-item>
                  </el-form>


            </div>


      </div>





</template>

<style scoped>
.container {
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
}


.form {
      width: 400px;
      /* height: 400px; */
      border: solid 1px grey;
      box-shadow: 0 0 30px rgb(0, 0, 0);
      padding: 40px;
}
</style>